<!-- 确认订单页 -->
<template>
  <div class="confirm-order">
    <!-- <HeaderTop title="确认订单"></HeaderTop> -->
    <div class="container-address">
      <img class="bj" src="../../assets/img/bj.png" alt="">
      <div class="address" v-if="this.$store.state.orderAddress && this.$store.state.orderAddress.name">
        <div class="refund-address">
          <div class="address-top">{{this.$store.state.orderAddress.name}}<span>{{this.$store.state.orderAddress.tel}}</span></div>
          <div class="address-bottom">{{this.$store.state.orderAddress.address}}</div>
        </div>
        <div class="icon" @click="$router.push({path: '/addresslist', query: {check: 1}})">
          <img class="xiugai" src="../../assets/img/xiugai.png" alt="">
          <span>修改</span>
        </div>
      </div>
      <div class="add-address" v-else
        @click="$router.push({path: '/addresslist', query: {check: 1}})">
        <img src="../../assets/img/add.png" alt="">
        <p>添加地址</p>
      </div>
    </div>

    <div class="container-goods" v-if="shopList">
      <ul class="collect_ul">
        <li class="collect_item" v-for="(good, index) in shopList.tcsList" :key="index">
          <img :src="good.cartImg" alt="">
          <div class="title">
            <h3 v-html="good.itemName"></h3>
            <p class="size"><span>{{good.weights}}</span> * <span>{{good.num}}</span></p>
            <p class="price">￥{{good.price*good.num}}</p>
          </div>
        </li>
      </ul>

      <div class="refund-charge">
        <div class="cell" v-if="shopList">
          <p>商品金额：</p>
          <p class="red">￥{{subPrice}}</p>
        </div>
        <div class="cell" @click="$router.push({path: '/coupon', query: {isOrder: 1, subPrice}})">
          <p>优惠券</p>
          <p class="red" v-if="$route.query.couponId">{{`${$route.query.minConsume}减${$route.query.deductionMoney}`}}</p>
          <p class="gray" v-if="!$route.query.couponId">请选择</p>
        </div>
        <div class="cell">
          <p>运费：</p>
          <p class="red">￥{{shopList.espressFee}}</p>
        </div>
        <div class="cell">
          <p>实付金额：</p>
          <p class="red">￥{{payMoney}}</p>
        </div>
      </div>
    </div>

    <div class="message-item">
      <div class="bg"></div>
      <div class="item">
        <p>留言：</p>
        <input type="text" placeholder="给卖家留言" v-model="orderRemark">
      </div>
    </div>

    <div class="btn">
      <div class="money">实付金额：<span>￥{{payMoney}}</span></div>
      <button class="pay-btn" @click="submitOrder">提交订单</button>
    </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'

export default {
  data () {
    return {
      address:false,
      shopList: [],
      subPrice: '',
      orderRemark: ''
    }
  },

  // components: {
  //   HeaderTop
  // },

  computed: {
    payMoney () {
      if (this.$route.query.deductionMoney) {
        return this.subPrice + this.shopList.espressFee - this.$route.query.deductionMoney
      }
      return this.subPrice + this.shopList.espressFee
    }
  },

  created () {
    console.log(this.$route)
    this.getSettlement()
    // 11
  },
  mounted () {
    // console.log()
  },

  methods: {
    async getSettlement () {
      // console.log('测试购物车id', this.$store.state.shopIdArray)
      const params = {
        userId: localStorage.getItem('userId'),
        token: localStorage.getItem('token'),
        tbCartIds: this.$store.state.shopIdArray
      }
      // console.log(params)
      const result = await this.API.reqSettlement(params)
      console.log('结算购物车', result)
      if (result.retCode !== '000') {
        this.$router.push('/shopcart')
      }
      // console.log(this.$route.params.userId)
      if (this.$route.params.userId) {
        this.$store.state.orderAddress = this.$route.params
      } else {
        this.$store.state.orderAddress = {}
      }
      if (result.retData.shipAddress && result.retData.shipAddress.userId && !this.$route.params.userId) {
        // this.addressList.forEach((item,index)=>{
          const obj = {}
          const item = result.retData.shipAddress
          obj.id = item.id
          obj.name = item.consignee
          obj.tel = item.mobile
          obj.address = item.area+item.city+item.county+item.address 
          obj.userId = item.userId
          obj.isDefault = item.ifDefault == 0 ? true : false
          this.$store.state.orderAddress = obj
        // })
      }
      this.shopList = result.retData
      // 获取金额
      this.subPrice = 0
      this.shopList.tcsList.forEach(item => {
        this.subPrice += item.price * item.num
      })
      if (this.$route.params.isDel) {
        // zml - 删除立即购买的购物车记录
        this.zmlPrivateDel()
      }
    },
    async zmlPrivateDel () {
      const delParams = {
        userId: localStorage.getItem('userId'),
        token: localStorage.getItem('token'),
        tbCartIds: String(this.$store.state.shopIdArray[0])
      }
      const delResult = await this.API.reqRemoveTbCart(delParams)
      console.log('删除购物车记录', delResult)
    },
    // 提交订单
    async submitOrder () {
      console.log(this.shopList)
      if (!this.$store.state.orderAddress.id) {
        this.$toast('请选择收货地址')
        return false
      }
      const params = {
        userId: localStorage.getItem('userId'),
        token: localStorage.getItem('token'),
        // 收货地址
        shipAddressId: this.$store.state.orderAddress.id,
        // 商品总价
        itemAmountTotal: this.subPrice + this.shopList.espressFee,
        // 实际付款金额
        orderAmountTotal: this.payMoney,
        // 购物车id(多个用逗号拼接)
        tbCartIds: this.shopList.tcsList.map(item => item.id).join(','),
        // 订单备注
        orderRemark: this.orderRemark,
        // 快递费
        espressFee: this.shopList.espressFee,
      }
      if (this.$route.query.couponId) {
        params.couponInfoId = this.$route.query.couponId
      }
      console.log(params)
      const result = await this.API.reqPlaceOrder(params)
      console.log('生成订单', result)
      if (result.retCode !== '000') {
        this.$toast('确认订单失败')
      }
      this.$store.state.orderAddress = {}
      this.$router.push({
        name: 'confirmpay',
        params: {
          orderInfoId: result.retData.id,
          orderNo: result.retData.orderNo,
          orderAmountTotal: result.retData.orderAmountTotal
        }
      })
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.confirm-order
  margin-bottom 50px
  padding-bottom 0 !important
  height auto
  width 100%
  background #fff
  .container-address
    bottom-border-1px(#EEEEEE)
    .bj
      height 3px
    .address
      height 95px
      display flex
      .refund-address
        width 75%
        height 65px
        margin 15px 18px
        .address-top
          color #333333
          height 25px
          font-size 14px
          span
            margin-left 20px
        .address-bottom
          height 25px
          line-height 18px
          color #868686
          font-size 13px
      .icon
        .xiugai
          width 12px
          height 12px
          margin-top 18px
          margin-right 5px
        span
          font-size 13px
          color #868686
    .add-address
      height 95px
      display flex
      flex-direction column
      justify-content center
      align-items center
      font-size 13px
      img 
        width 17px
        height 17px
        margin-bottom 10px
  .container-goods
    background #fff
    padding-top 10px
    .collect_ul
      .collect_item
        display flex
        padding 10px 10px
        background #F9F9F9
        img
          width 70px
          height 70px
          border-radius 5px
        .title
          display flex
          flex-direction column
          justify-content space-around
          margin-left 20px
          font-size 14px
          .size
            font-size 12px
            color #838383
          .price
            color red
    .refund-charge
      overflow hidden
      padding 0 20px
      h2
        font-size 15px
        font-weight bold
        margin-bottom 10px
      .cell
        display flex
        justify-content space-between
        color #333333
        font-size 14px
        height 40px
        line-height 40px
        bottom-border-1px(#F2F2F2)
        .red
          color red
        .gray
          color gray
      .pay
        margin-top 5px
        border-top 1px solid #EDEDED
        height 45px
        line-height 45px
        .paybt
          float right
          span
            color red
  .message-item
    .bg
      width 100%
      height 10px
      background #F9F9F9
    .item
      padding 0 20px
      bottom-border-1px(#EEEEEE)
      display flex
      justify-content space-between
      align-items center
      height 50px
      font-size 14px
      background #fff
      input
        width 85%
        color #AAAAAA
  .btn
    display flex
    width 100%
    align-items center
    height 50px
    font-size 15px
    position fixed
    bottom 0
    border-top 1px solid #EEEEEE
    // top-border-1px(#EEEEEE)
    .money
      padding-left 20px
      width 50%
      height 50px
      line-height 50px
      background #fff
      span 
        color red
    .pay-btn
      outline none
      border none
      width 50%
      height 50px
      vertical-align center
      background #145B3E
      color #fff
</style>